<template>
    <view class="definite">
		<u-navbar :is-back="true" :custom-back="BackM" title="物流详情" back-text=""> </u-navbar>
		<view class="status">
		  <view class="status-image" v-for="(item,index) in mailDic.value.orderDetailsList" :key="index">
			<image :src="item.posType.image" alt="" />
			<view class="product">{{item.num}}件商品</view>
		  </view>
		  <view class="status-mes-one">
			<span class="status-one">物流状态：</span>
			<span class="status-two">{{mailStatus(mailDic.value)}}</span>
		  </view>
		  <view class="status-mes-two">
			<span class="status-one">物流单号：</span>
			<span class="status-one">{{mailDic.value.logisticsNo}}</span>
		  </view>
		</view>
		
		<!-- <view class="number">
		  <view class="num">8-6-3569</view>
		  <view class="content">取件码</view>
		</view> -->
		
		<u-time-line style="padding: 0 1rem 1.2rem 1rem; background: #ffffff">
			  <u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node> 
				  <view class="u-node" style="background: #19be6b">
					<!-- 此处为uView的icon组件 -->
					<!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
					<view style="color:#ffffff">收</view>
				  </view>
				</template>
				<template v-slot:content>
				  <view>
					<view class="u-order-desc">【收货地址】{{mailDic.value.address.address}}</view>
				  </view>
				</template>
			  </u-time-line-item>
			  
			  <!-- <u-time-line-item>
				
				<template v-slot:content>
				  <view>
					<view class="u-order-desc"
					  >您的快递已暂存至深圳清湖您的快递已暂存至深圳清
					  您的快递已暂存至深圳清湖您的快递已暂存至深圳清</view
					>
					<view class="u-order-time">2018-09-19 10:12:54</view>
				  </view>
				</template>
			  </u-time-line-item> -->
			  
			  <u-time-line-item v-for="(item1,index1) in mailDic.value.wlList" :key="index1">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node v-if="index1==0"> 
				    <view class="u-node" style="background: #19be6b">
				  	<!-- 此处为uView的icon组件 -->
				  	<!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
				  	<view style="color:#ffffff">D</view>
				    </view>
				</template>
				  
				<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
				<template v-slot:content>
				  <view>
					<view class="u-order-desc desc">{{item1.info}}</view>
					<view class="u-order-time time">{{item1.time}}</view>
				  </view>
				</template>
			  </u-time-line-item>
			  
			  
		</u-time-line>
    </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public mailDic:any={};//物流信息

  created() {}
  
  onLoad(value:any){
  	this.mailDic = JSON.parse(decodeURIComponent(value.order))
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
  onHide(){
  	  uni.hideLoading();
  }
  
  //物流信息状态
  mailStatus(value:any){
	  if(parseInt(value.status) == 2){
		  return '已收货'
	  }else if(parseInt(value.status) == 1){
		  if(parseInt(value.logisticsStatus) == 0){
			  return '未发货'
		  }else if(parseInt(value.logisticsStatus) == 1){
			  return '运输中'
		  }
	  }
  }
  
  //返回按钮
   BackM(){
  		uni.navigateBack({
  		   delta: 1,
  		});
   }
   
}
</script>

<style scoped>
.definite {
  font-family: PingFang SC;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.status {
  padding: 0.5rem;
  background: #ffffff;
  width: 100%;
  height: 5rem;
}
.status-image {
  width: 4.3rem;
  float: left;
}
.status-image image {
  width: 3.56rem;
  height: 2.78rem;
}
.product {
  width: 3.56rem;
  height: 0.78rem;
  font-size: 0.55rem;
  text-align: center;
  background: #02af74;
  color: #ffffff;
}
.status-mes-one,
.status-mes-two {
  float: left;
  height: 0.8rem;
  line-height: 2.5rem;
  font-size: 0.75rem;
}
.status-mes-one {
  margin-bottom: 0.5rem;
}
.status-one {
  color: #000000;
}
.status-two {
  color: #02af74;
}
.number {
  padding: 1rem;
  text-align: center;
  background: #ffffff;
  border-top: 0.4rem #f3f5f3 solid;
}
.num {
  width: 7.68rem;
  height: 1.98rem;
  line-height: 1.98rem;
  margin: 0 auto;
  color: #ffffff;
  border-radius: 2rem;
  background: #02af74;
  font-size: 0.9rem;
}
.content {
  padding-top: 0.4rem;
  font-weight: 400;
  font-size: 0.6rem;
  color: #000000;
}
.desc {
  color: #000000 !important;
}
.time {
  color: #666666 !important;
}
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}
>>> .u-time-axis-node {
  left: 0;
}
>>> .u-time-axis::before {
  left: 1rem;
}
.u-order-desc,
.u-order-time {
  margin-left: 1rem;
}
.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}
.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}
.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
</style>